<template>
	<view class="index-content">
		<view class="info-content">
			<view class="content-top">
				<view class="account-fill">本机登录账号</view>
				<view class="account-fill-content">
					<div>
						<view class="account-fill-user">{{userInfo.userName}}</view>
						<view class="account-fill-name">{{userInfo.userCode}}</view>
					</div>
					<div class="account-fill-image-box" @click="handleOwn()">
						<image src="../../../static/more.png" style="width: 100%;height: 100%;"></image>
					</div>
				</view>
			</view>
			<view class="content-top-one">
				<view class="account-fill-top">
					<view class="account-fill">全部账号</view>
					<view class="account-fill" style="color: #4899F3;" @click="handleAdd()">新增账号</view>
				</view>
				<view class="account-fill-content" v-for="(item, index) in allUser" :key="index">
					<div>
						<view class="account-fill-user">{{item.userCode}}</view>
						<view class="account-fill-name">{{item.userName}}</view>
					</div>
					<div class="account-fill-image-box" @click="handleAll(index)">
						<image src="../../../static/more.png" style="width: 100%;height: 100%;"></image>
					</div>
				</view>
			</view>
		</view>
		<u-action-sheet :list="listOwn" @click="clickOwn" v-model="showOwn"></u-action-sheet>
		<u-action-sheet :list="listALL" @click="clickAll" v-model="showAll"></u-action-sheet>
		<u-modal v-model="showReset" title="温馨提示" :content="contentP" :show-cancel-button="true"
			@confirm="handleConfirmReset">
		</u-modal>
		<u-modal v-model="showRemove" title="温馨提示" :content="contentA" :show-cancel-button="true"
			@confirm="handleConfirmDel">
		</u-modal>
	</view>
</template>

<script>
	import {
		getAllUser,
		resetUserP,
		delUser
	} from '@/api/user.js';
	export default {
		data() {
			return {
				//屏幕高度
				screenHeight: 0,
				userIndex: 0,
				showAll: false,
				showOwn: false,
				showReset: false,
				showRemove: false,
				userInfo: {},
				listOwn: [{
					text: '修改密码',
					color: '#171A1D',
					fontSize: 20
				}, {
					text: '退出账号',
					color: '#F15F5F',
					fontSize: 20
				}],
				listALL: [{
					text: '重置密码',
					color: '#171A1D',
					fontSize: 20
				}, {
					text: '删除账号',
					color: '#F15F5F',
					fontSize: 20
				}],
				contentP: "",
				contentA: "",
				allUser: []
			}
		},
		onLoad() {
			this.userInfo.userCode = uni.getStorageSync('usercode');
			this.userInfo.userName = uni.getStorageSync('username');
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		onShow() {
			if (this.userInfo.userCode == "admin") {
				this.getAllUser();
			}
		},
		methods: {
			getAllUser() {
				getAllUser({
					usercode: "",
					username: ""
				}).then((res) => {
					if (res && res.state == "ok") {
						this.allUser = res.data;
					} else if (res && res.state == "fail") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			handleAdd() {
				uni.navigateTo({
					url: "/pages/tabbar/addAccount/addAccount"
				})
			},
			clickAll(index) {
				if (index == 0) {
					this.showReset = true;
					this.contentP = "确认重置【" + this.allUser[this.userIndex].userName + "】账号密码？";
				} else {
					this.showRemove = true;
					this.contentA = "确认删除【" + this.allUser[this.userIndex].userName + "】账号？";
				}
			},
			clickOwn(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/tabbar/password/password"
					})
				} else {
					// 退出账号
					uni.navigateTo({
						url: "/pages/auth/login/login"
					})
				}
			},
			handleAll(index) {
				this.userIndex = index;
				this.showAll = true;
			},
			handleOwn() {
				this.showOwn = true;
			},
			handleConfirmReset() {
				this.resetUserP();
			},
			resetUserP() {
				resetUserP({
					id: this.allUser[this.userIndex].id
				}).then((res) => {
					if (res && res.state == "ok") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					} else if (res && res.state == "fail") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			handleConfirmDel() {
				this.delUser();
			},
			delUser() {
				delUser({
					id: this.allUser[this.userIndex].id
				}).then((res) => {
					if (res && res.state == "ok") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
						this.getAllUser();
					} else if (res && res.state == "fail") {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EEF0F4;
		font-size: 18px;
	}

	.index-content {
		width: 100%;
		height: 200px;
		background-image: linear-gradient(180deg, #4899F3 0%, rgba(72, 153, 243, 0.00) 100%);
	}

	.info-content {
		padding: 10px;
	}

	.content-top {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 10px;
	}

	.content-top-one {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 4px;
		padding: 10px;
		margin-top: 10px;
	}

	.image-box {
		width: 120px;
		height: 120px;
	}

	.text-box {
		margin-top: 12px;
	}

	.account-fill-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.account-fill {
		font-weight: 500;
		font-weight: bold;
		font-size: 16px;
		color: #171A1D;
	}

	.account-fill-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 0;
		border-bottom: 1px solid #EEF0F4;
	}

	.account-fill-content:last-child {
		border-bottom: none;
	}

	.account-fill-user {
		margin-top: 20px;
		font-size: 16px;
		color: #171A1D;
	}

	.account-fill-name {
		font-size: 14px;
		color: rgba(23, 26, 29, 0.60);
		margin-top: 10px;
	}

	.account-fill-image-box {
		width: 24px;
		height: 24px;
	}
</style>
